<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/static/context/mytags.jsp"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${sysname}-个人中心</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <%@ include file="../../../static/context/cssheader.jsp"%>

    <link rel="stylesheet" type="text/css" href="${basePath}/static/pagination/style/pagination.css" media="screen">

    <%@ include file="../../../static/context/cndheader.jsp"%>
</head>
<body class="bd-box">
<!----------------------------------页头-------------------------------->
<!--头部开始-->
<jsp:include page="header.jsp"></jsp:include>
<!--header-->
<!----------------------------------主体内容-------------------------------->
<div class="contentBody">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#">首页</a></li>
            <li class="active">个人中心</li>
        </ol>
    </div>
    <!-- 盒子容器开始 -->
    <div class="user-box">

        <div class="user-left">
            <div>
                <c:if test="${pic == '0'}">
                    <img id="imghead" src="${basePath}/static/custom/images/icon_user_hd.png" width="100" alt="" onclick="$('#previewImg').click();" title="点击上传">
                </c:if>
                <c:if test="${pic != '0'}">
                    <img id="imghead" src="${basePath}/fileDownLoad/showFile/${pic}" width="100" alt="" border="0" onclick="$('#previewImg').click();" title="点击上传">
                </c:if>
                <p>${user.username}</p>
            </div>
        </div>

        <div class="user-right">
            <!-- 上面tab导航 -->
            <div class="row m-b">
                <div class="col-xs-12">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs bx-tabs-def" role="tablist" id="usercentertab">
                        <li role="presentation" class="active"><a href="#tabs1" role="tab" data-toggle="tab">用户信息</a></li>
                        <li role="presentation"><a href="#tabs2" role="tab" data-toggle="tab">我的产品</a></li>
                        <li role="presentation"><a href="#tabs3" role="tab" data-toggle="tab">修改密码</a></li>
                        <li role="presentation"><a href="#tabs4" role="tab" data-toggle="tab">我的消息</a></li>
                        <li role="presentation"><a href="#tabs5" role="tab" data-toggle="tab">服务器</a></li>
                    </ul>
                </div>
            </div>

            <!-- 下面tab主体内容 -->
            <div class="tab-content">
                <!--tab1-->
                <div role="tabpanel" class="tab-pane active m-t-lg" id="tabs1">
                    <div class="row">
                        <div class="col-xs-12">
                            <!--表单-->
                            <form class="form-horizontal" role="form" id="form12" action="#" method="post">
                                <div class="form-group">
                                    <label class="col-xs-2 control-label">头像：</label>
                                    <div class="col-xs-3">
                                        <c:if test="${pic == '0'}">
                                            <img id="imghead2" src="${basePath}/static/custom/images/icon_user_hd.png" width="30" alt="" onclick="$('#previewImg').click();" title="点击上传" style="cursor: pointer;">
                                        </c:if>
                                        <c:if test="${pic != '0'}">
                                            <img id="imghead2" src="${basePath}/fileDownLoad/showFile/${pic}" width="30" alt="" border="0" onclick="$('#previewImg').click();" title="点击上传" style="cursor: pointer;">
                                        </c:if>
                                        <input type="file" id="previewImg" name="previewImg" onchange="uploadhead()" style="display: none;">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-2 control-label">用户名：</label>
                                    <div class="col-xs-3">
                                        <p class="form-control-static">${user.username}
                                        <input type="hidden" id="userId" name="userId" value="${user.id}">
                                        <input type="hidden" id="username" name="username" value="${user.username}">
                                        <input type="hidden" id="picId" name="picId" value="${pic}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-2 control-label">姓名：</label>
                                    <div class="col-xs-3">
                                        <input type="text" class="form-control" id="realname" name="realname" value="${user.realname}" placeholder="未设置">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-2 control-label">性别：</label>
                                    <div class="col-xs-3">
                                        <input type="hidden" id="sexValue"  value="${user.sex}">
                                        <label>
                                            <input type="radio" name="sex" id="sex1" value="0"> 男
                                        </label>
                                        <label>
                                            <input type="radio" name="sex" id="sex2" value="1"> 女
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-2 control-label">邮箱：</label>
                                    <div class="col-xs-3">
                                        <input type="text" class="form-control" id="email" name="email" value="${user.email}" placeholder="未设置">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-2 control-label">所在地：</label>
                                    <div class="col-xs-3">
                                        <textarea class="form-control" id="address" name="address" rows="3">${user.address}</textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-xs-3 col-xs-offset-2">
                                        <button type="button" class="btn btn-primary" id="saveUser">提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!--tab2-->
                <div role="tabpanel" class="tab-pane  m-t-lg" id="tabs2">
                    <div class="row">
                        <div class="col-xs-12">
                            <!-- 我的产品列表 -->
                            <ul class="engineer-li am-avg-sm-3" id="productlist"></ul>
                            <!--没有任何数据一个提示信息模版-->
                            <div class="text-center padding-xl" id="nodatatip2">
                                <img src="${basePath}/static/custom/images/icon_no_data.png" width="60" alt="">
                                <p>当前您还没有任何记录哦...</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--tab3-->
                <div role="tabpanel" class="tab-pane  m-t-lg" id="tabs3">
                    <div class="row">
                        <div class="col-xs-12">
                            <form class="form-horizontal" role="form" id="updateForm">
                                <div class="form-group">
                                    <label class="col-xs-2 control-label">原密码：</label>
                                    <div class="col-xs-3">
                                        <input type="password" id="oldPassword" name="oldPassword" class="form-control" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-2 control-label">新密码：</label>
                                    <div class="col-xs-3">
                                        <input type="password" id="newPassword" name="newPassword" class="form-control" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-2 control-label">确认密码：</label>
                                    <div class="col-xs-3">
                                        <input type="password" id="confirmPassword" name="confirmPassword" class="form-control" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-3 col-xs-offset-2">
                                        <button type="submit" class="btn btn-primary">确认修改</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!--tab4-->
                <div role="tabpanel" class="tab-pane  m-t-lg" id="tabs4">
                    <div class="row">
                        <div class="col-xs-12">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th style="width: 100px;">选择</th>
                                    <th style="width: 500px;">内容</th>
                                    <th style="width: 100px;">时间</th>
                                </tr>
                                </thead>
                                <tbody id="messages">

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <span><input id="selectAll" type="checkbox" style="height: 14px;width: 32px">全选</span>
                            <span><a id="clear" class="btn btn-link">不选</a></span>
                            <span><a id="read" class="btn btn-link">标记为已读</a></span>
                            <span><a id="delete" class="btn btn-link">删除</a></span>
                        </div>
                        <!--页码分页-->
                        <div class="col-xs-6">
                            <nav class="text-center" style="float: right">
                                <div class="M-box4" style="display:none;"></div>
                                <%--<ul class="pagination">
                                    <li><a href="#">上一页</a></li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">...</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">下一页</a></li>
                                </ul>--%>
                            </nav>
                        </div>
                    </div>
                </div>
                <!--tab5-->
                <div role="tabpanel" class="tab-pane  m-t-lg" id="tabs5">
                    <div class="row">
                        <div class="col-xs-12">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>服务器</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="servers">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    服务器信息
                </h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                   关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!----------------------------------页脚-------------------------------->
<jsp:include page="footer.jsp"></jsp:include>


<%@ include file="/static/context/customjs.jsp"%>
<script type="text/javascript" src="${basePath}/static/pagination/script/jquery.pagination.js"></script>
<script type="text/javascript" src="${basePath}/static/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="${basePath}/static/js/custom/user_center.js"></script>
<script type="text/javascript" src="${basePath}/static/js/custom/user_center_order.js"></script>
</body>
</html>

